<template>
  <div class="" style="position:relative;top: 3.7rem;left: 10%;width: 90%;">
    <br>
    <div class="container-fluid">
      <div class="card">
        <div class="card-body">
          <div class="col-12 p-0">
            <p><i class="zi zi_minus zi_rotate90 p-0 m-0" style="color: blue"></i> 店铺信息</p>
          </div>

          <el-tabs v-model="activeName" @tab-click="handleClick">
            <el-tab-pane label="基本信息" name="first">
              <div class="mt-5 offset-1">
                <table cellspacing="" cellpadding="13" class="col-4">
                  <tbody>

                  <tr>
                    <td>门店名称<span style="color: red">*</span></td>
                    <td><input type="text" class="form-control" placeholder="请输入门店名称"></td>
                  </tr>

                  <tr>
                    <td>门店显示&emsp;</td>
                    <td>
                      <input type="radio" class="" name="ShopShow" checked> 显示<input type="radio" class="ml-3" name="ShopShow">
                      <br>
                      <span style="color: #a0a0a0">注意：隐藏 (关闭后，用户将无法下单)</span>
                    </td>
                  </tr>

                  <tr>
                    <td>门店状态</td>
                    <td>
                      <input type="radio" class="" name="ShopStatus" checked> 正常营业<input type="radio" class="ml-3" name="ShopStatus"> 紧急关店 (关闭后，用户将无法下单)
                      <br>
                      <span style="color: #a0a0a0">注意：隐藏 (关闭后，用户将无法下单)</span>
                    </td>
                  </tr>

                  <tr>
                    <td>门店Logo</td>
                    <td>
                      <input type="file" id="ShopImgSelect" v-on:change="change()"> <br> <br>
                      <div style="width: 80px;height: 80px;border: 1px solid #f6f6f6">
                        <img src=" " id="ShopImg" alt="" width="80px" height="80px">
                      </div>
                    </td>
                  </tr>

                  <tr>
                    <td>联系人<span style="color: red">*</span></td>
                    <td><input type="text" class="form-control" placeholder="请输入门店联系人"></td>
                  </tr>


                  <tr>
                    <td>门店电话<span style="color: red">*</span></td>
                    <td><input type="text" class="form-control" placeholder="请输入门店电话"></td>
                  </tr>


                  <tr>
                    <td>所属区域<span style="color: red">*</span></td>
                    <td>
                      <div class="row">
                        <select name="" class="form-control col-4 ml-3 d-inline">
                          <option value="0">选择省</option>
                        </select>
                        <select name="" class="form-control col-4 d-inline">
                          <option value="0">选择市</option>
                        </select>
                        <select name="" class="form-control col-3 d-inline">
                          <option value="0">选择县</option>
                        </select>
                      </div>
                    </td>
                  </tr>

                  <tr>
                    <td>详细地址<span style="color: red">*</span></td>
                    <td><input type="text" class="form-control" placeholder="请输入详细地址"></td>
                  </tr>

                  <tr>
                    <td></td>
                    <td>
                      <button class="btn btn-success"><i class="fa fa-paper-plane mr-1"></i> 保存</button>
                      <button class="btn btn-light"><i class="zi zi_trashalt mr-2"></i> 清空</button>
                    </td>
                  </tr>
                  </tbody>
                </table>
              </div>

            </el-tab-pane>
            <el-tab-pane label="门店信息" name="second">

              <div class="offset-1">
                <div>
                  门店简介
                  <el-input
                    v-model="textarea"
                    :rows="1"
                    type="textarea"
                    placeholder="Please input"
                    class="col-3 mt-5"
                  />
                </div>

                <div>
                  主营产品  <el-input v-model="input" placeholder="Please input" class="col-3 mt-4" />
                </div>


                <div>
                  人均消费
                  <el-input v-model="input2" placeholder="Please input" class="col-3 mt-4">
                    <template #append>元</template>
                  </el-input>
                </div>

                <div>
                  <button class="btn mt-5">&emsp;&emsp;&emsp;&nbsp;</button>
                  <button class="btn btn-primary">保存</button>
                </div>
              </div>

            </el-tab-pane>
            <el-tab-pane label="账号密码" name="third">
              <div class="mt-5 offset-1">
                <table cellspacing="" cellpadding="13" class="col-4">
                  <tbody>

                  <tr>
                    <td>登录账号<span style="color: red">*</span></td>
                    <td><input type="text" class="form-control" placeholder="请输入登录账号"></td>
                  </tr>

                  <tr>
                    <td>登录密码<span style="color: red">*</span></td>
                    <td><input type="text" class="form-control" placeholder="请输入登录密码"></td>
                  </tr>


                  <tr>
                    <td>绑定手机号<span style="color: red">*</span></td>
                    <td><input type="text" class="form-control" placeholder="请输入绑定手机号"></td>
                  </tr>

                  <tr>
                    <td>关联微信管理员</td>
                    <td>
                      <el-select v-model="value" placeholder="Select">
                      <el-option
                        v-for="item in options"
                        :key="item.value"
                        :label="item.label"
                        :value="item.value"
                      >
                      </el-option>
                    </el-select></td>
                  </tr>

                  <tr>
                    <td></td>
                    <td>
                      <button class="btn btn-success"><i class="fa fa-paper-plane mr-1"></i> 保存</button>
                      <button class="btn btn-light"><i class="zi zi_trashalt mr-2"></i> 清空</button>
                    </td>
                  </tr>
                  </tbody>
                </table>
              </div>
            </el-tab-pane>
          </el-tabs>

        </div>
      </div>
    </div>
    <br>
    <div class="container-fluid mt-5" id="copyright" align="center">
      ——————————————这里是版权——————————————<br><br>
    </div>
    <br>
  </div>

</template>

<script>
  export default {
    name: "BusinessProfile",
    data() {
      return {
        activeName: 'first',
        options: [{
          value: '1',
          label: 'account1'
        }, {
          value: '2',
          label: 'account2'
        },],
        value: ''
      };

    },
    methods:{
      change(){
        var file =  document.getElementById('ShopImgSelect').files[0];
        var re = new FileReader();
        re.readAsDataURL(file);
        re.onload = function(re){
          $('#ShopImg').attr("src", re.target.result);
          console.log(re.target.result )
        }
      },

    }
  }
</script>

<style scoped>

</style>
